<template>
  <view class="code-login">
    <u-toast ref="uToast" />
    <view class="code-login__form">
      <u-form>
        <u-form-item left-icon="account" prop="name">
          <u-input
            type="number"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
          />
        </u-form-item>
        <u-form-item class="flex" left-icon="edit-pen" prop="name">
          <u-input
            class="flex-3"
            placeholder="请输入图形验证码"
            v-model="loginForm.imageCode"
            type="number"
          ></u-input>
          <view class="" slot="right">
            <u-image
              width="200rpx"
              height="60rpx"
              :src="imgCode"
              @click="getImageCode()"
            ></u-image>
          </view>
        </u-form-item>
        <u-form-item left-icon="email" prop="name">
          <u-input
            placeholder="请输入验证码"
            v-model="loginForm2.smsCode"
            type="number"
          ></u-input>
          <text
            class="code-login__tip price-text"
            slot="right"
            @click="getCode"
            >{{ codeTips }}</text
          >
        </u-form-item>
      </u-form>
      <u-button
        class="mt-36"
        type="primary"
        :custom-style="customStyle"
        @click="submit"
        >登录</u-button
      >
      <view class="mt-36 flex align-center justify-between">
        <text></text>
      </view>
    </view>
    <!-- <view class="flex justify-center code-login__footer">
			<text>登录即同意</text>
			<text class="code-login__footer--link">《用户隐私协议》</text>
		</view> -->
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>

<script>
import { baseURL } from '@/config.js';
export default {
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      codeTips: '',
      imgCode: '',
      loginForm: {
        phone: null,
        imageCode: null,
        imageCodeId: null,
        smsType: 'PHONE_SMS_CODE_LOGIN',
      },
      loginForm2: {
        phone: null,
        username: null,
        imageCode: null,
        imageGuid: null,
        smsCode: null,
        loginType: 'APP_MOBILE_PHONE_CODE',
      },
      hasPermission: false, //复选框
    };
  },
  props: {
    isChecked: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听父组件复选框传递过来的值
    isChecked(newVal) {
      console.log('newVal----->103', newVal);
      if (newVal) {
        this.hasPermission = true;
      } else {
        this.hasPermission = false;
      }
    },
  },
  mounted() {
    console.log('code');
    this.getImageCode();
  },
  methods: {
    // 图片验证码事件
    getImageCode() {
      this.loginForm.imageCodeId = new Date().getTime();
      this.imgCode =
        baseURL + '/common/getImageCode/' + this.loginForm.imageCodeId;
    },
    handleChangeType() {
      this.$emit('change', 'password');
    },
    // 获取验证码事件
    getCode() {
      // 判断是否选中隐私协议
      if (this.hasPermission === true) {
        const _self = this;
        if (_self.$refs.uCode.canGetCode) {
          if (_self.loginForm.phone === null) {
            this.$zx.msg('手机号不能为空');
            return;
          }
          if (_self.loginForm.imageCode === null) {
            this.$zx.msg('图形验证码不能为空');
            return;
          }
          uni.showLoading({
            title: '正在获取验证码',
            mask: true,
          });
          _self.$zx.user_api.sendVerifyCodeSms(_self.loginForm).then((data) => {
            console.log('sendVerifyCodeSms----->122', data);
            uni.hideLoading();
            _self.$refs.uToast.show({
              title: '验证码已发送',
              type: 'success',
            });
            //组件倒计时
            _self.$refs.uCode.start();
          });
        } else {
          this.$zx.msg('稍后再重试');
        }
      } else {
        this.$zx.msg('请勾选隐私协议');
      }
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 登录事件
    submit() {
      // 判断是否选中隐私协议
      if (this.hasPermission === true) {
        const _self = this;
        if (_self.loginForm.phone === null) {
          this.$zx.msg('手机号不能为空');
          return;
        }
        if (_self.loginForm.imageCode === null) {
          this.$zx.msg('图形验证码不能为空');
          return;
        }
        if (_self.loginForm2.smsCode === null) {
          this.$zx.msg('验证码不能为空');
          return;
        }
        _self.loginForm2.phone = _self.loginForm.phone;
        _self.loginForm2.username = _self.loginForm.phone;
        _self.loginForm2.imageCode = _self.loginForm.imageCode;
        _self.loginForm2.imageGuid = _self.loginForm.imageCodeId;
        console.log('_self.loginForm2----->160', _self.loginForm2);
        this.$zx.user_api.phoneLogin(_self.loginForm2).then((data) => {
          console.log('phoneLogin----->159', data);
          uni.setStorageSync('token', data.loginToken);
          uni.setStorageSync('user_info', data.agentUser);
          uni.setStorageSync('agentNo', data.currentIdentity.agentNo);
          data.userType = 'staff';
          // 获取用户信息
          // if (data.userType === 'staff') {
          //   // 获取权限列表
          //   this.$zx.user_api.getUserInfo().then((info) => {
          //     uni.setStorageSync('permissions', info.permissions);
          //     uni.setStorageSync('user_info', info);
          //   });
          // }
          uni.setStorageSync('login_role', data.userType);
          if (getCurrentPages().length === 1) {
            if (data.userType === 'staff') {
              uni.reLaunch({
                url: '/pages/staff-home/staff-home',
              });
            }
            // if (data.userType === 'worker') {
            //   uni.reLaunch({
            //     url: '/pages/worker-home/worker-home',
            //   });
            // }
          } else {
            uni.navigateBack({
              delta: 1,
            });
          }
        });
      } else {
        this.$zx.msg('请勾选隐私协议');
      }
    },
  },
};
</script>
<style scoped lang="scss">
.code-login {
  height: 100%;
  position: relative;

  &__codeImage {
    width: 200rpx;
    height: 100rpx;
  }

  &__form {
    background-color: #ffffff;
    border-radius: 24rpx;
    margin: 0 auto;
    position: relative;

    padding: 28rpx;
    padding-top: 66rpx;
  }

  &__tip {
    color: $zx-content-color;
    font-size: 26rpx;
  }

  &__footer {
    position: absolute;
    font-size: 24rpx;
    bottom: 50rpx;
    left: 220rpx;

    &--link {
      color: $zx-theme-color;
    }
  }
}

.custom-style {
  height: 88rpx;
  background-color: $zx-theme-color !important;
}
</style>
